<template>
  <div>
    <el-drawer v-model="drawer" title="文件预览" :with-header="true" size="800px">
      <iframe v-if="type === 'pdf'" :src="pdfUrl" style="height: 100%; width: 100%"></iframe>
      <img v-if="type === 'jpg' || type === 'png'" :src="imgUrl" alt="" />
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  const drawer = ref(false)
  const type = ref('')
  const imgUrl = ref('')
  const pdfUrl = ref('')
  const show = (data) => {
    type.value = data.fileType.toLowerCase()
    if (type.value === 'pdf') {
      pdfUrl.value = '/web/viewer.html?file=' + data.filePath
      drawer.value = true
    }
    if (type.value === 'jpg' || type.value === 'png') {
      imgUrl.value = data.filePath
      drawer.value = true
    }
  }
  defineExpose({
    show,
  })
</script>

<style scoped>
  img {
    width: 760px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
  }
</style>
